<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
			<search2></search2>
		<!-- #endif -->
		<!-- 
			需求：
				如果打包成 微信小程序，就显示小程序用户你好。
				如果打包成 H5浏览器页面，就显示网页用户你好。
		-->
		<!-- 条件编译是 uni-app 为了多端支持封装的，可以实现不同端展示不同内容 -->
		
		<!-- #ifdef H5 -->
		<view>
			<view>
				{{ title }}
			</view>
			网页用户你好，你需要填表单注册用户 
			<form @submit="" @reset="">
				请输入用户名：<input type="text" value="" />
				请输入密码：<input type="text" password />
					<button form-type="submit">注册</button>
					<button form-type="reset">重置表单</button>
			</form>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view>
			<view>
				{{ title }}
			</view>
			小程序用户你好，你授权就可以获取用户信息了 
			<button type="default" open-type="getUserInfo" @getuserinfo="getUserInfo">微信授权登录</button>
		</view>
		<!-- #endif -->
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				title: '微信小程序才有的数据',
				// #endif
				
				// #ifdef H5
				title: '网页端专属title',
				// #endif
			}
		},
		onLoad() {
			// 这个API其实在底层做了平台兼容封装，调用不同平台的本地存储实现功能
			uni.setStorageSync('aa','bb');
			
			uni.request({
				url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
			}).then(res=>{
				console.log(res);
			})
			
		},
		methods: {
			// #ifdef MP-WEIXIN
			getUserInfo(e){
				console.log(e);
			}
			// #endif
		}
	}
</script>

<style lang="less">
	// #ifdef MP-WEIXIN
	page{
		background-color: #4CD964;
	}
	// #endif
	
	
	// #ifdef H5
	page{
		background-color: pink;
	}
	// #endif
</style>
